<!--
 * @Author: AT-bear 1509109728@qq.com
 * @Date: 2024-07-26 14:36:17
 * @LastEditors: @AT-bear 1509109728@qq.com
 * @LastEditTime: 2024-07-27 17:01:02
 * @FilePath: \Front-end-Three-Musketeers-Case\case\七龙珠\index.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>七龙珠</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div id="box">
        <div class="ball">
        </div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
    </div>
        

   
</body>

<script>
const balls = Array.from(document.getElementsByClassName('ball'));

const map = [
    [{x: 38, y: 37}],
    [{x: 53, y: 28}, {x: 29, y: 48}],
    [{x: 37, y: 22},{x: 18, y: 45},{x: 53, y: 48}],
    [{x: 23, y: 23},{x: 55, y: 23},{x: 23, y: 55},{x: 55, y: 55},],
    [{x: 36, y: 14},{x: 14, y: 32},{x: 58, y: 32},{x: 23, y: 58},{x: 51, y: 58}],
    [{x: 36, y: 14},{x: 14, y: 32},{x: 58, y: 32},{x: 23, y: 58},{x: 51, y: 58},{ x: 36, y: 37 }],
    [{x: 23, y: 12},{x: 11, y: 38},{x: 61, y: 38},{x: 22, y: 61},{x: 52, y: 61},{ x: 36, y: 37 },{x: 51, y: 12}],
];

function generateStar(ball, count) {
    let polygon = '';
    let svg = '';
    let html = '';

    // 定义<defs>
    polygon = `<defs><polygon id="star" points="49,5 64,35 98,40 73,62 79,94 49,79 18,94 24,62 0,39 33,35" fill="rgb(231, 68, 27)"/></defs>`;
   

    // 根据计数和map生成星星
    for (let i = 0; i < count; i++) {
        if (map[count - 1] && map[count - 1][i]) {
            let x = map[count - 1][i].x;
            let y = map[count - 1][i].y;
            const scale = 0.25;  // 缩放比例

            // 创建use
            svg += `<use class="star" href="#star" style="transform: translate(${x}px, ${y}px) scale(${scale});"/>`;
        }
    }

     // 定义svg
    html=`<svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">${polygon}${svg}</svg>`

    ball.innerHTML = html;
}

// Loop through each ball and generate stars
for (let index = 0; index < balls.length; index++) {
    const count = index + 1;
    generateStar(balls[index], count);
}
</script>

</html>
